<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
</head>
<body>



<div style="margin: 23px 250px;">
    <h1 style="margin: 0 250px">Java 24班 外贸业务管理系统</h1>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">订单管理</li>
            <li >用户管理</li>
            <li>商品管理</li>
            <li>日志管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show"><table id="demo" lay-filter="test"></table></div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>

</div>
<script src="https://layui.dongyunit.com/res/layui/dist/layui.js"></script>

<script>
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            ,toolbar: 'default'
            , url: 'list' //数据接口
            , page: {'limits':[3,5,7,9,11],'limit':3} //开启分页
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'userId', title: '用户id', width: 80}
                , {field: 'number', title: '数量', width: 80, sort: true}
                , {field: 'createtime', title: '时间', width: 180}
                , {field: 'note', title: '备注'}

            ]]
        });
    });
</script>
</body>
</html>